import './Login.scss'
import { useState } from "react";
import { useNavigate } from 'react-router-dom';
import { Input, hooks, Button, Checkbox } from 'react-vant';
import { ClosedEye, EyeO } from '@react-vant/icons';

import Logo from '../../images/logo.png'
import QQLogo from '../../images/QQ登录.png'

export default function Login() {
    const navigate = useNavigate()
    const [state, updateState] = hooks.useSetState({
        tel: '',
        password: '',
        showPassword: false
    })
    const togglePasswordVisibility = () => {
        updateState({ showPassword: !state.showPassword });
    };
    const [checked, setChecked] = useState(false)

    return (
        <div>
            <div className='loginPage'>
                <div className='register' onClick={()=>navigate('/register')}>注册账号</div>
                <div className='topLogo'>
                    <img src={Logo} alt="" className='logo' />
                    <div className='logoTitle'>Nexity</div>
                </div>
                <div className='input'>
                    <Input
                        value={state.tel}
                        type='tel'
                        onChange={tel => updateState({ tel })}
                        placeholder='请输入登录手机号'
                        style={{ borderBottom: '1px solid rgb(220, 215, 215)' }}
                    />
                    <Input
                        value={state.password}
                        // 根据 showPassword 状态来确定密码框的类型
                        type={state.showPassword ? 'text' : 'password'}
                        onChange={password => updateState({ password })}
                        placeholder='请输入密码'

                        suffix={state.showPassword ? <EyeO onClick={togglePasswordVisibility} /> : <ClosedEye onClick={togglePasswordVisibility} />}
                    />
                </div>
                <div className='login'>
                    <div className='loginbtn'>
                        <Button 
                        type='primary' 
                        className='denglu'
                        onClick={()=>navigate('/home')}
                        >登录</Button>
                        <div className='wjmm' onClick={() => navigate('/retrieve')}>忘记密码？点击找回</div>
                    </div>
                    <div className='quickLogin'>
                        <img src="" alt="" />
                    </div>
                </div>
                <div className='otherLogin'>
                    <a href="">
                        <img src={QQLogo} alt="" />
                    </a>
                </div>
                <div>
                    <Checkbox 
                    checked={checked} 
                    onChange={setChecked}
                    iconSize={15}
                    className='xieyi'
                    >
                        是否同意<a href="">「用户协议」</a>和<a href="">「隐私政策」</a>
                    </Checkbox>
                </div>
            </div>
        </div>
    )
}
